<template>
  <PageCard title="Unicode 编码转换工具">
    <n-space vertical size="large">
      <n-grid :x-gap="16" :y-gap="16" :cols="21">
        <n-gi :span="10">
          <n-h3 class="mt-0 mb-3 text-center">输入区域</n-h3>
          <div class="text-center mb-2 text-sm text-gray-500">
            支持输入中文或Unicode编码
          </div>
          <n-input
              v-model:value="inputValue"
              type="textarea"
              placeholder="示例1：你好世界&#10;示例2：\u4f60\u597d\u4e16\u754c"
              :rows="15"
          />
        </n-gi>
        <n-gi :span="1" class="flex flex-col justify-center items-center">
          <n-space vertical>
            <n-tooltip trigger="hover">
              <template #trigger>
                <n-button circle strong secondary type="primary" @click="unicodeToCn">
                  <template #icon><n-icon :component="ArrowForward"/></template>
                </n-button>
              </template>
              Unicode -> 中文
            </n-tooltip>
            <n-tooltip trigger="hover">
              <template #trigger>
                <n-button circle strong secondary type="primary" @click="cnToUnicode">
                  <template #icon><n-icon :component="ArrowBack"/></template>
                </n-button>
              </template>
              中文 -> Unicode
            </n-tooltip>
          </n-space>
        </n-gi>
        <n-gi :span="10">
          <n-h3 class="mt-0 mb-3 text-center">输出区域</n-h3>
          <div class="text-center mb-2 text-sm text-gray-500">
            转换结果
          </div>
          <n-input
              v-model:value="outputValue"
              type="textarea"
              placeholder="转换结果将显示在此处"
              :rows="15"
              readonly
          />
        </n-gi>
      </n-grid>
      <n-space justify="end">
        <n-button @click="handleClear">
          <template #icon><n-icon :component="ClearIcon"/></template>
          清空内容
        </n-button>
        <n-button type="primary" @click="handleCopy" :disabled="!outputValue">
          <template #icon><n-icon :component="CopyIcon"/></template>
          复制结果
        </n-button>
      </n-space>
    </n-space>
    <n-divider />
    <UsageGuide
      :title="usageGuideConfig.title"
      :steps="usageGuideConfig.steps"
      :tips="usageGuideConfig.tips"
      :example="usageGuideConfig.example"
    />
  </PageCard>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {useMessage, NIcon} from 'naive-ui';
import {ArrowBack, ArrowForward} from '@vicons/ionicons5';
import {CopyAllOutlined as CopyIcon, ClearOutlined as ClearIcon} from '@vicons/material';
import PageCard from "@/components/PageCard.vue";
import UsageGuide from "@/components/UsageGuide.vue";
import { CryptoApi } from '@/api/crypto';

const inputValue = ref('');
const outputValue = ref('');
const message = useMessage();

// UsageGuide configuration
const usageGuideConfig = {
  title: 'Unicode 编码转换使用说明',
  steps: [
    '在左侧输入框输入需要转换的内容',
    '点击中间的箭头按钮选择转换方向',
    '右箭头：将 Unicode 编码转换为中文',
    '左箭头：将中文转换为 Unicode 编码',
    '右侧显示转换结果，可复制使用'
  ],
  tips: [
    'Unicode 编码格式为 \\uXXXX，其中 XXXX 为十六进制数',
    '支持批量转换，可以输入多行文本',
    '转换时会保留原文本的格式和换行',
    'ASCII 字符通常不会被转换，仅转换非 ASCII 字符'
  ],
  example: '中文：你好世界 → Unicode：\\u4f60\\u597d\\u4e16\\u754c'
};

const unicodeToCn = async () => {
  if (!inputValue.value) {
    message.warning('请输入要转换的内容');
    return;
  }
  try {
    const response = await CryptoApi.unicodeConvert({
      content: inputValue.value,
      type: 'fromUnicode'
    });
    if (response.code === 200) {
      outputValue.value = response.data;
      message.success('转换成功');
    } else {
      message.error(response.message || '转换失败');
    }
  } catch (e) {
    message.error("转换失败，请输入正确的 Unicode 编码。");
  }
};

const cnToUnicode = async () => {
  if (!inputValue.value) {
    message.warning('请输入要转换的内容');
    return;
  }
  try {
    const response = await CryptoApi.unicodeConvert({
      content: inputValue.value,
      type: 'toUnicode'
    });
    if (response.code === 200) {
      outputValue.value = response.data;
      message.success('转换成功');
    } else {
      message.error(response.message || '转换失败');
    }
  } catch (e) {
    message.error("转换失败，网络错误或服务异常。");
  }
};

const handleClear = () => {
  inputValue.value = '';
  outputValue.value = '';
};

const handleCopy = async () => {
  if (!outputValue.value) return;
  try {
    await navigator.clipboard.writeText(outputValue.value);
    message.success('结果已成功复制到剪贴板！');
  } catch (err) {
    message.error('复制失败，您的浏览器可能不支持或未授予剪贴板权限。');
  }
};
</script>

<style scoped lang="less">
</style>
